<template>
  <view class="personal-info">
    <v-title :title="title" :desc="desc" :info="info">
      <view class="block-shadow">
        <block  v-for="(item,index) in personalInfo" :key="index">
                    <cmd-cell-item :title="item.title" :addon="item.text" v-if="!item.editable"></cmd-cell-item>
                    <cmd-cell-item :title="item.title" slot-right :addon="item.text" v-else-if="item.pickable">
                          <picker   
                              v-if="postData.length>0  && item.picktype=='post'"
                              @change="bindPickerChange" 
                              :data-code="item.picktype" 
                              range-key="postName"
                              :value="postIndex"
                              :range="postData">
                                  <view class="uni-input">{{ postData[postIndex].postName }}</view>
                          </picker>
                          <picker   
                              v-else-if="provinceData.length>0 && item.picktype=='province'"
                              @change="bindPickerChange" 
                              :data-code="item.picktype" 
                              range-key="label"
                              :value="provinceIndex"
                              :range="provinceData">
                                  <view class="uni-input">{{ provinceData[provinceIndex].label }}</view>
                          </picker>
                          <picker   
                              v-else-if="cityData.length>0 && item.picktype=='city'"
                              @change="bindPickerChange" 
                              :data-code="item.picktype" 
                              range-key="label"
                              :value="cityIndex"
                              :range="cityData">
                                  <view class="uni-input">{{ cityData[cityIndex].label }}</view>
                          </picker>

                          <picker   
                              v-else-if="majorData.length>0 && item.picktype=='major'"
                              @change="bindPickerChange" 
                              :data-code="item.picktype" 
                              range-key="departName"
                              :value="majorIndex"
                              :range="majorData">
                                  <view class="uni-input">{{ majorData[majorIndex].departName }}</view>
                          </picker>

                          <picker   
                              v-else-if="classesData.length>0 && item.picktype=='classes'"
                              @change="bindPickerChange" 
                              :data-code="item.picktype" 
                              range-key="departName"
                              :value="classesIndex"
                              :range="classesData">
                                  <view class="uni-input">{{ classesData[classesIndex].departName }}</view>
                          </picker>
                          
                    </cmd-cell-item>
                    <cmd-cell-item :title="item.title" slot-right v-else-if="item.editable">
                      <input type="text"  v-model="item.text" class="userinput">
                    </cmd-cell-item>
         
        </block>
      </view>
    </v-title>
    <view class="btn-row">
      <button type="primary" class="primary saveBtn" @click="save">保存</button>
    </view>
  </view>
</template>

<script>
    import vTitle from '@/components/common/title/index';
    import cmdCellItem from '@/components/cmd-cell-item/cmd-cell-item';
    import MineService from '@/services/mine/index';
    import mixins from '@/mixins/index';
    const mineService = new MineService();
    //let context;
    export default {
        name: "baseinfo",
        components:{
            vTitle,
            cmdCellItem
        },
        mixins:[mixins],
        data(){
            return{
                title:'',
                desc:'',
                info:'',
                personalInfo:[
                ],
                postData:[],
                postIndex:0,
                provinceData:[],
                provinceIndex:0,
                cityData:[],
                cityIndex:0,
                majorData:[],
                majorIndex:0,
                classesData:[],
                classesIndex:0,
                code:''
            }
        },
        filters:{
          showPickerLabel(code){
              let item =  context.pickObj[code]
              return (item.data)[item.index].postName;
          }
        },
        methods:{
            save(){
              this.personalInfo.forEach(s => {
                  if(s.pickable){
                    if(s.picktype=='post'){
                      s.id = this.postData[this.postIndex].id
                    }else if(s.picktype=='province'){
                      s.id = this.provinceData[this.provinceIndex].id
                    }else if(s.picktype=='city'){
                      s.id = this.cityData[this.cityIndex].id
                    }
                    else if(s.picktype=='major'){
                      s.id = this.majorData[this.majorIndex].id
                    }else if(s.picktype=='classes'){
                      s.id = this.classesData[this.classesIndex].id
                    }
                  }
              });
              mineService.updateinfo(
                {personalInfo:this.personalInfo,roleType:this.userData.roleType}
                ).then(resultDto=>{
                  if(resultDto.success){
                    uni.showToast({
                        title: '修改信息成功',
                        duration: 2000
                    });
                  }
                });
            },
            bindPickerChange(e){
              const {detail,target} = e
                let code = target.dataset.code;
                this.postIndex = detail.value;
                  if(code=='post'){
                    this.postIndex = detail.value;
                    //s.id = this.postData[this.postIndex].id
                  }else if(code=='province'){
                    this.provinceIndex = detail.value;
                    //s.id = this.provinceData[this.provinceIndex].id
                    this.getCityData({provinceId:this.provinceData[this.provinceIndex].id })
                  }else if(code=='city'){
                    this.cityIndex = detail.value;
                    //s.id = this.cityData[this.cityIndex].id
                  }
                  else if(code=='major'){
                    this.majorIndex = detail.value;
                    //s.id = this.majorData[majorIndex].id
                    this.getClassesData({majorId:this.majorData[this.majorIndex].id })
                  }else if(code=='classes'){
                    this.classesIndex = detail.value;
                    //s.id = this.classesData[this.classesIndex].id
                  }
            },
            /* 
            city 城市
            province 省份
            专业 major
            职务 post
            班级 classes
            */
            getServiceByCode(code){
              return {
                'city':'queryCity',
                'province':'queryProvince',
                'classes':'queryClass',
                'major':'queryDepart',
                'post':'queryPostList',
              }[code]
            },
            async getDataByType({picktype,id}){
                /* 获取对应的picker的数据 */
                  const resultDto = await mineService[this.getServiceByCode(picktype)]();
                  if(resultDto.success){
                    if(picktype=='post'){
                        this.postData = resultDto.result;
                        const index = this.postData.findIndex(s_=>s_.id==id);
                        if(index!=-1){
                          this.postIndex = index;
                        }
                    }else if(picktype=='province'){
                        this.provinceData = resultDto.result;
                        const index = this.provinceData.findIndex(s_=>s_.id==id);
                        if(index!=-1){
                          this.provinceIndex = index;
                        }
                        console.log('provinceIndex:',this.provinceIndex)
                    }else if(picktype=='major'){
                        const index_ = resultDto.result.findIndex(s_=>s_.id==id);
                        this.majorData = resultDto.result;
                        if(index_!=-1){
                          this.majorIndex = index_;
                        }
                    }
                  }
            },
            getCityData({cityId,provinceId}){
                        mineService[this.getServiceByCode('city')]({provinceId})
                          .then(re=>{
                            if(re.success&&re.result!=null){
                              this.cityData =  re.result;
                              if(cityId!=undefined){
                                  const index = this.cityData.findIndex(s_=>s_.id==cityId);
                                  if(index!=-1){
                                    this.cityIndex = index;
                                  }
                              }
                              
                            }
                          })
            },
            getClassesData({majorId,id}){
                mineService[this.getServiceByCode('classes')]({majorId})
                          .then(re=>{
                            console.log('getCityData:',re)
                            if(re.success&&re.result!=null){
                              const index = re.result.findIndex(s_=>s_.id==id);
                              if(index!=-1){
                                this.classesIndex = index;
                              }
                              this.classesData =  re.result;
                            }
                          })
            },
            async  getData(){
                const $this = this;
                const resultDto = await mineService.getUserInfo({roleType:this.userData.roleType});
                const {success,result} = resultDto;
                let provinceId,majorId;
                    if(success){
                        $this.title = result.title;
                        $this.desc = result.desc;
                        $this.info = result.info;
                        for(let s of result.personalInfo){
                            if(s.pickable){
                              if(s.picktype=='province'){
                                  provinceId = s.id
                              }else if(s.picktype=='major'){
                                  majorId = s.id
                              }
                              if(['post','province','major'].find(i=>i==s.picktype)!=undefined){
                                  this.getDataByType(s)
                              }else if(s.picktype=='city'){
                                console.log('getCityData:',provinceId)
                                this.getCityData({provinceId,cityId:s.id});
                              }else if(s.picktype=='classes'){
                                this.getClassesData({majorId,id:s.id});
                              }
                            }
                        }
                        $this.personalInfo = result.personalInfo;
                    }
            }
        },
        computed:{
        },
        onLoad({code}){
          this.code = code;
          this.getData();
          //context = this;
        }
    }
</script>

<style scoped>
  .btn-row {
    margin-top: 50upx;
    padding: 20upx 50upx;
  }
  .userinput {
    text-align: right;
    color: #333;
  }
</style>